A wise developer once told me, the best thing that can happen to a project is to bring in motivated, new talent. New talent, motivated with the right attitude comes with a new perspective. He insisted that the first thing they do is ask “Why?”. Developers often become stuck in their ways, giving reasons for doing things like, “That’s the way we’ve always done it”.

Recently I started working on a new big data search project. I took my mentor’s advice and asked the question Why? I quickly found some areas we could improve. It was the front end code handling synchronization between the model and view of the application. There was a confusing amount of jQuery and event listeners, and I began to question if there was a simpler solution. After research and conversations with colleagues, I was led directly into the arms of AngularJS two-way data binding!

What is Data Binding?

Data binding is the act of establishing a connection between the user interface and business logic of a web application. It allows the user to communicate with the view of the web page in order to interact with the model. Traditional one-way data binding, supported in most JavaScript frameworks, merges the template and model components of a web application in order to form the view.

The Problem

The major problem with one-way data binding is that changes to the model or view after the merge are not reflected in the view. Similarly, changes to the view are not updated in the model. In order to achieve stronger binding, the developer must write custom code to sync the model with the view and vice versa. The founders of AngularJS recognized this issue and resolved it by providing two-way data binding as a built-in feature.

AngularJS and Two-Way Data Binding

With AngularJS, two-way binding between the model and view is much more simplified. When a user changes the value of an element in the view such as input to a text box, not only does the view update immediately, but the model also stores the new value. AngularJS performs this magic behind the scenes, leaving much less work for us! The example below shows just how simple it is to implement two-way data binding in AngularJS.

<input ng-model="name" type="text">
<h1>Hi {{name}}</h1>

Using ng-model, the variable ‘name’ is now bound to the input text. It will update as the user types into the input text box.

<function MyController($scope) {
    $scope.name = 'Eric';
}

<div ng-controller="MyController">
    <h1>Hello {{name}}</h1>
</div>

Using the double bracket syntax, you are able to access the ‘name’ variable that is bound to the scope of MyController.

AngularJS Performance

AngularJS two-way data binding comes at a slight cost. When a view element is bound to the model in AngularJS, it is added to a list of watchers called the $watch list. Using dirty checking, AngularJS runs through a $digest loop that detects changes to any element in the $watch list. The loop will continue updating the view and model until everything in the $watch list is up to date. As the list grows, our app can be severely slowed down. Common practice suggests that your view should not bind more than 2000 elements.

To achieve a user interface that is smooth and responsive, I suggest using two-way binding only when necessary. AngularJS provides another option that can help prevent you from creating applications bloated with an oversized $watch list. One-time binding, introduced in AngularJS version 1.3, provides a way to bind certain elements without the unnecessary overhead.

One-time Binding

If a particular element needs to be updated in the view to reflect changes to it, then two-way data binding is the way to go. However, if an element in the view will remain unchanged after its initial creation, consider using one-time binding. One-time binding is accomplished by binding the element during the first $digest checking loop, but then excluding it from the $watch list. If the variable is then changed in the view or model, the view will not be updated. One-time binding helps keep the $watch list small, improving the performance of the application. One-time data binding can be achieved using the syntax below:

<h1>Hi {{::name}}</h1>
<my-directive info="::expression"></my-directive>

By simply prepending “::” onto a value, AngularJS knows to use one-time binding.

AngularJS makes front end development much simpler with its implementation of two-way data binding. As long as you remain aware of the limits of data binding with AngularJS, you should be able to create a cleaner, more maintainable user interface. Two-way data binding is one of the main selling points of AngularJS, but the framework doesn’t stop there. I look forward to exploring more topics and sharing them in future posts.